<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 左文字右图标通用模块 -->
<template>
    <div
        class="version_middle_root"
        v-bind:style="{ 'background-color': background }"
        @click="versionClick"
    >
        <div class="version_middle_msg">
            <p class="new_line">
                <span class="version_middle_title" :class="{'rtl-l text-r': $rtl}">{{ info.title }}</span>
                <span class="version_middle_point" v-if="info.isNew == '1'"></span>
            </p>
            <span class="version_middle_content" :class="{'rtl-l text-r': $rtl}">{{ info.msg }}</span>
        </div>
        <img class="version_middle_img" src="@/assets/image/ic_public_right.svg" v-if="info.versionIconShow"/>
    </div>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default:()=>{},
        },
    },
    data() {
        return {
            background: window.isDark ? "#202224" : "#FFFFFF",
        };
    },
    methods: {
        versionClick(){
            if(!this.info.versionIconShow)return;
            this.$emit('versionClick')
        }
    },
};
</script>

<style scoped>
.version_middle_root {
    height: 7.2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.6rem;
    margin-bottom: .8rem;
}
.version_middle_msg {
    display: flex;
    flex-direction: column;
    margin-left: 1.2rem;
    width: 100%;
}
.version_middle_title {
    width: auto;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
}
.version_middle_content {
    width: auto;
    font-size: 1.4rem;
    line-height: 1.9rem;
    margin-top: 0.05rem;
    opacity: 0.6;
}
.version_middle_img {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .5rem;
    margin-left: auto;
}

.new_line{
    display: flex;
    align-items: center;
}

.version_middle_point{
    width: 0.6rem;
    height: 0.6rem;
    background-color: #f00;
    display: inline-block;
    border-radius: 50%;
    margin-left: .96rem;
}
</style>
